<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<script src="../js/lib/mdui.min.js"></script>
		<script src="../js/lib/jquery-3.2.1.slim.min.js"></script>
		<script src="../js/lib/holder.min.js"></script>
		<script src="../js/lib/highlight.pack.js"></script>
		<script src="../js/lib/mustache.js"></script>
		<script src="../js/docs.js"></script>
		<script src="../js/init.js"></script>
		<link rel="stylesheet" href="../css/mdui.min.css">
		<link rel="stylesheet" href="../css/github-gist.css">
		<link rel="stylesheet" href="../css/railscasts.css">
		<link rel="stylesheet" href="../css/docs.css">
		<link rel="stylesheet" href="../css/mdui.min.css" />
		<title>云盘注册</title>
		<script>
			var see = 0;
		//成功！！
			function getback() {
				window.location.href = 'login.html';
			}


				//验证成功！！！
			function checkpassword() {
				let pwd1 = $("#pwd1").val();
				let pwd2 = $("#pwd2").val();
				if(pwd1 == pwd2) {
					$("#div3").removeClass("mdui-textfield-invalid");
					see =see +1;
				} else {
					$("#div3").addClass("mdui-textfield-invalid");
				}
			}
			//算是成功了吧
			function User() {
				let user = $("#username").val();
				$.ajax({
					url: "../api/register",
					type: "POST",
					data: {
						username: user
					},
					dataType: "json",
					success: function(data) {
						let code = data.code;
							if(code == 1) {
							mdui.alert("用户已注册");
							$("#div1").addClass("mdui-textfield-invalid");
						} else if(code == 0) {
							$("#div1").removeClass("mdui-textfield-invalid");
							see =see +1;
						} else {
							mdui.alert("未知错误");

						}
					}
				});
			}
	//验证成功！！！
			function registersubmit() {
				let user = $("#username").val();
				let pwd = $("#pwd1").val();
				let email = $("#email").val();
				let gender = $("#sex").val();
				let permission = $("#permission").val();
				$.ajax({
					url: "../api/register",
					type: "POST",
					data: {
						username: user,
						password: pwd,
						email: email,
						gender: gender,
						permission: permission
					},
					dataType: "json",
					success: function(data) {
						mdui.alert('注册成功！', function() {
							window.location.href = 'login.html';
						});
					}
				});
			}
			//验证成功！
			$(function() {
				$("#contrast").change(function() {
					let flag = $("#contrast").is(':checked');
					if(flag == true && see ==2 ) {
						$("#regeister").attr("disabled",false);
					} else {
						$("#regeister").attr("disabled",true);
					}
				});
			});
		</script>
	</head>

	<body class="mdui-theme-accent-pink mdui-loaded mdui-theme-primary-blue mdui-appbar-with-toolbar">
		<header class="mdui-appbar mdui-appbar-fixed">
			<div class="mdui-toolbar mdui-color-theme">
				<a href="#" class="mdui-typo-headline ">disk注册</a>
				<div class="mdui-toolbar-spacer"></div>
				<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '返回'}">
					<i class="mdui-icon material-icons mdui-m-b-3" onClick="getback()">arrow_back</i>
					</span>
				<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
			</div>
		</header>
		<div class="mdui-container mdui-p-t-3">
			<div class="mdui-card mdui-col-offset-xs-3 mdui-col-xs-6 mdui-p-a-3 mdui-m-b-3">
				<div class="mdui-textfield" id="div1">
					<i class="mdui-icon material-icons mdui-m-b-3">account_box</i>
					<label class="mdui-textfield-label">Username</label>
					<input class="mdui-textfield-input" type="text" name="username" id="username" pattern="[A-Za-z0-9]*" onblur="User()" required/>
					<div class="mdui-textfield-error" >用户名填写不规范（允许数字和大小写字母）或用户名已存在</div>

				</div>

				<div class="mdui-textfield">
					<i class="mdui-icon material-icons mdui-m-b-3">lock</i>
					<label class="mdui-textfield-label">Password</label>
					<input class="mdui-textfield-input" type="password" pattern="[A-Za-z0-9]*" id="pwd1" required/>
					<div class="mdui-textfield-error">大小写字母数字</div>
				</div>

				<div class="mdui-textfield" id="div3">
					<i class="mdui-icon material-icons mdui-m-b-3">remove_red_eye</i>
					<label class="mdui-textfield-label">Password Again</label>
					<input class="mdui-textfield-input" type="password" id="pwd2" onblur="checkpassword()" required/>
					<div class="mdui-textfield-error">两次密码输入不一致</div>
				</div>

				<div class="mdui-textfield">
					<i class="mdui-icon material-icons mdui-m-b-3">email</i>
					<label class="mdui-textfield-label">email</label>
					<input class="mdui-textfield-input" type="text" id="email" pattern="[a-zA-Z0-9]*@[a-zA-Z0-9]*.[a-zA-Z0-9]*" required/>
					<div class="mdui-textfield-error">e-mail 格式xxx@xx.com</div>
				</div>

				<div class="mdui-textfield">
					<i class="mdui-icon material-icons">android</i>
					<label class="mdui-textfield-label">gender</label>
					<label class="mdui-radio mdui-col-offset-xs-1">
    					<input type="radio" name="group1" value="男" id="sex" checked/>
    					<i class="mdui-radio-icon"></i>
  	 					男
  					</label>
					<label class="mdui-radio mdui-m-l-2">
    					<input type="radio" name="group1" value="女" id="sex"/>
   						<i class="mdui-radio-icon"></i>
 						女
 					</label>
				</div>
				<div class="mdui-textfield">
					<i class="mdui-icon material-icons">directions_walk</i>
					<label class="mdui-textfield-label">permission</label>
					<label class="mdui-radio mdui-col-offset-xs-1">
    					<input type="radio" name="group2" value="普通用户" id="permission" checked/>
    					<i class="mdui-radio-icon"></i>
  	 					普通用户
  					</label>
					<label class="mdui-radio mdui-m-l-2">
    					<input type="radio" name="group2" value="高级用户" id="permission"/>
   						<i class="mdui-radio-icon"></i>
 						高级用户
 					</label>
				</div>

				<div class="mdui-divider mdui-m-t-2 mdui-m-t-3 "></div>
				<div class="mdui-container">
					<label class="mdui-checkbox mdui-row-8">
  						<input type="checkbox" id="contrast" />
  						<i class="mdui-checkbox-icon"></i>
 						我已阅读并同意<strong><a href="constract.html">《相关服务条款和隐私政策》	</a></strong>
					</label >
				</div>


				<div class="mdui-container">
					<br />
  					<button class="mdui-col-offset-xs-2 mdui-col-xs-2 mdui-btn mdui-ripple mdui-text-color-theme" onclick="getback()">返回</button>
					<button id="regeister" class="mdui-col-offset-xs-4 mdui-col-xs-2 mdui-btn mdui-color-theme mdui-btn mdui-ripple mdui-shadow-1" onclick="registersubmit()" disabled>提交</button>
                </div>
    		</div>
   		</div>
	</body>
</html>